<%@ page import="com.checkfree.isolutions.customer.persist.*" %>
<%@ page import="com.checkfree.isolutions.statement.*" %>
<%@ page import="com.checkfree.isolutions.statement.persist.*" %>
<%@ page import="com.checkfree.isolutions.property.Properties" %>
<%@ page import="com.checkfree.isolutions.property.PropertiesConfig" %>
<%@ page import="java.util.*" %>
<%@ page import="java.net.*" %>
<%@ page import="java.text.*" %>
<%@ page import="com.myebills.ebpsfrontend.cust.maxis.PhoneBook" %>
<%@ page import="com.myebills.ebpsfrontend.cust.controller.*" %>
<%@ page import="com.myebills.ebpsfrontend.cust.utils.*" %>

					<div class="bill_detail phoneBook">
<%
    final EbppxUrlManager urlManager = (EbppxUrlManager) request.getAttribute(EbppxUrlManager.REQUEST_ATTRIBUTE_NAME);
    String PHONE_BOOK_LIST_SERVLET_URL=EbppxCusConstants.PHONE_BOOK_LIST;
           PHONE_BOOK_LIST_SERVLET_URL += EbppxUtil.getVersion(PHONE_BOOK_LIST_SERVLET_URL);
    String PHONE_BOOK_ADD_JSP_URL=EbppxCusConstants.PHONE_BOOK_ADD;
           PHONE_BOOK_ADD_JSP_URL += EbppxUtil.getVersion(PHONE_BOOK_ADD_JSP_URL)+".jsp";
    String PHONE_BOOK_UPDATE_JSP_URL=EbppxCusConstants.PHONE_BOOK_UPDATE;
           PHONE_BOOK_UPDATE_JSP_URL += EbppxUtil.getVersion(PHONE_BOOK_UPDATE_JSP_URL)+".jsp";
    String PHONE_BOOK_UPDATE_ALL_SERVLET_URL=EbppxCusConstants.PHONE_BOOK_UPDATE_ALL;
           PHONE_BOOK_UPDATE_ALL_SERVLET_URL += EbppxUtil.getVersion(PHONE_BOOK_UPDATE_ALL_SERVLET_URL);


    final String lastUrl = "";
    final int pageType = 1;
    final String acctSel = "";

    ArrayList phoneBookList = null;
    String currentPage = (String) request.getAttribute("currentPage");
    if(currentPage==null || currentPage.equals("")){
		currentPage = "1";
	}

    Iterator phoneBookIter = null;


    if ( request.getAttribute("PhoneBookList") !=null)
    {
        phoneBookList = (ArrayList) request.getAttribute("PhoneBookList");
        phoneBookIter = phoneBookList.iterator();
    }

    // For pagination
    //int intCurrentPage = Integer.parseInt(currentPage);
    //int noOfPages = EbppxUtil.getNoOfPages(phoneBookList.size());
    //ArrayList paginatedList = EbppxUtil.paginate(phoneBookList,intCurrentPage);
	if(phoneBookList.size() < 1){

%>						
						<!-- If there are no entries in the user's phone book //-->
							<ul>
								<li class="no_entry">
									<p>You currently don't have any entries.</p>
									<input type="button" class="btn btn_add_entry" value="Add Entry" />
									<div class="add_entry">
										<form action="<%= PHONE_BOOK_LIST_SERVLET_URL %>" method="post" class="add_entry_form">
											<input type="hidden" name="act" value="Add"/>
											<div class="add_entry_detail">
												<input placeholder="Name" name="name"/>
												<input placeholder="Phone Number" name="number"/>
												<div class="call_type">
													<span>Call Type</span>
													<div>
														<img src="images/online_account/icon_business_call.gif" /><input type="radio" name="callType" value="B" checked/>
														<div class="clear"></div>
														<span>Business</span>
													</div>
													<div>
														<img src="images/online_account/icon_personal_call.gif" /><input type="radio" name="callType" value="P" />
														<div class="clear"></div>
														<span>Personal</span>
													</div>
												</div>
											</div>
											<div class="add_entry_btn">
												<i></i>
												<div class="clear"></div>
												<input type="submit" class="btn small" value="Add Entry" />
											</div>
										</form>
										<div class="delete_entry error_message">
											<p class="error_message_text">Error message</p>
											<div>
												<input type="button" value="OK" />
											</div>
										</div>
									</div>
								</li>
							</ul>
							<!-- #END If there are no entries in the user's phone book //-->
<%} else{%>
							<!-- If there are entries in the user's phone book //-->
							<ul>
								<li>

									<!-- Search bar for entries. This should filter as the user is typing. //-->
									<div class="phone_search">
										<form>
											<input type="text" name="phonebook-search" placeholder="Search for phone numbers" /><input type="submit" class="icon_search" value=" " />
										</form>
									</div>
									<!-- #END Search bar for entries. //-->

									<!-- General listing of all current entries //-->
									<div class="phone_book_list">
										
<% 
									for(int i=0; i < phoneBookList.size(); i++){ 
											PhoneBook pb = (PhoneBook)phoneBookList.get(i);
											String name = "-";
											 if(pb.getName()!=null && !pb.getName().equals("")){
												 name = pb.getName();
											 }
											 String strCallType = "Error!!!";
											 String icon_type_class = "";
											 if(pb.getCallType()!=null && !pb.getCallType().equals("")){
												 String callType = pb.getCallType();
												 if(callType.equals("P")){
													 strCallType = "Personal Call";
													 icon_type_class = "personal_call";
												 }
												 else if(callType.equals("B")){
													 strCallType = "Business Call";
													 icon_type_class = "business_call";
												 }
											 }
%>
										<div class="phone_book">
											<form action="<%= PHONE_BOOK_LIST_SERVLET_URL %>" method="post" class="phone_book_form">
												<input type="hidden" name="act" value="Update"/>
												<div class="icon">
													<input type="button" class="btn_delete" />
													<input type="button" class="btn lightgrey small edit_phone_book" value="Edit" />
													<input type="submit" class="btn small done_phone_book" value="Done" />
												</div>
												<ul>
													<li>
														<div>
															<label>Name :</label>
															<input class="lightgreen" name="name" value="<%=name%>" disabled />
														</div>
													</li>
													<li>
														<div>
															<label>Phone Number :</label>
															<input class="green" name="number" value="<%=pb.getNumber()%>" disabled />
														</div>
													</li>
													<li>
														<div class="calltype">
															<label>Call Type :</label>
															<input type="hidden" name="callType" value="<%=pb.getCallType()%>"/>
															<input class="blue" value="<%=strCallType%>"  disabled />
														</div>
														<div class="icon_call_type"><i class="<%=icon_type_class%>"></i></div>
													</li>
												</ul>
											</form>
											<!-- Confirmation note for if you want to delete this entry //-->
											<form class="delete_entry delete_form" action="<%= PHONE_BOOK_LIST_SERVLET_URL %>" method="post">
												<input type="hidden" name="act" value="Delete"/>
												<input type="hidden" name="number" value="<%=pb.getNumber()%>"/>
												<input type="hidden" name="name" value="<%=name%>"/>
												<input type="hidden" name="callType" value="<%=pb.getCallType()%>"/>
												
												<p>Are you sure you want to delete this entry?</p>
												<div>
													<input type="submit" value="Yes" />
													<input type="button" value="Cancel" />
												</div>
											</form>
											<!-- #END Confirmation note for if you want to delete this entry //-->
											<div class="delete_entry error_message">
												<p class="error_message_text">Error message</p>
												<div>
													<input type="button" value="OK" />
												</div>
											</div>
										</div>

										<% } %>

									</div>
									<!-- #END General listing of all current entries //-->

								</li>
								<li>
									<!-- Add an entry button //-->
									<div class="entry"><input type="button" class="btn btn_add_entry" value="Add Entry" /></div>
									<!-- #END Add an entry button //-->

									<!-- Add an entry //-->
									<div class="add_entry">
										<form action="<%= PHONE_BOOK_LIST_SERVLET_URL %>" method="post" class="add_entry_form">
											<input type="hidden" name="act" value="Add">
											<div class="add_entry_detail">
												<input placeholder="Name" name="name"/>
												<input placeholder="Phone Number" name="number"/>
												<div class="call_type">
													<span>Call Type</span>
													<div>
														<img src="images/online_account/icon_business_call.gif" /><input type="radio" name="callType" value="B" checked/>
														<div class="clear"></div>
														<span>Business</span>
													</div>
													<div>
														<img src="images/online_account/icon_personal_call.gif" /><input type="radio" name="callType" value="P" />
														<div class="clear"></div>
														<span>Personal</span>
													</div>
												</div>
											</div>
											<div class="add_entry_btn">
												<i></i>
												<div class="clear"></div>
												<input type="submit" class="btn small btn_add_entry_small" value="Add Entry" />
											</div>
										</form>
										<!-- Error note for if it doesn't manage to add //-->
										<div class="delete_entry error_message">
											<p class="error_message_text">Error message</p>
											<div>
												<input type="button" value="OK" />
											</div>
										</div>
										<!-- #END Error note for if it doesn't manage to add //-->

									</div>
									<!-- #END Add an entry //-->
								</li>
							</ul>
<%}%>
							<!-- #END If there are entries in the user's phone book //-->
						</div>

                
<script type="text/javascript">
	$(document).ready(function() {
		//show add new entry
		$('.btn_add_entry').click(function(){
			$('.add_entry').slideDown();
		});
		
		//hide add new entry
		$('.add_entry_btn i').click(function(){
			$('.add_entry').slideUp();
		});
		
		//edit phone details
		$('.edit_phone_book').live('click',(function(){
			$(this).parents('form').addClass('phone_book_editable');
			$(this).hide();
			$(this).next('.done_phone_book').show();
			$(this).parents('form').find('input').removeAttr('disabled');
			$(this).parents('form').find('input.green').attr('disabled', 'disabled');
			$(this).parents('form').find('input.blue').attr('disabled', 'disabled');
			$(this).parents('form').find('.icon_call_type').css('right', '-5%');
			$(this).parents('form').find('.icon_call_type').children('i').css('cursor', 'pointer');
			$(this).parents('form').find('.icon_call_type').children('i').addClass('editable');
			$(this).parents('form').find('.icon_call_type').children('i').html('Switch to '+$(this).parents('form').find('input.blue').val().toLowerCase());
		}));
		
		$('.business_call').live('click',(function(){
			if($(this).parents('form').hasClass('phone_book_editable')){
				$(this).removeClass('business_call').addClass('personal_call').html('Switch to personal call');
				$(this).closest('li').children('div.calltype').children('input:hidden').val('P');
				$(this).closest('li').children('div.calltype').children('input:text').val('Personal Call');
			}
		}));
	
		$('.personal_call').live('click',(function(){
			if($(this).parents('form').hasClass('phone_book_editable')){
				$(this).removeClass('personal_call').addClass('business_call').html('Switch to business call');
				$(this).closest('li').children('div.calltype').children('input:hidden').val('B');
				$(this).closest('li').children('div.calltype').children('input:text').val('Business Call');
			}
		}));
		
		//Check data input before submit
		$('.phone_book_form').bind("submit", function() {
			if(checkData($(this))){
				$(this).removeClass('phone_book_editable');
				$(this).find('.done_phone_book').hide();
				$(this).find('.edit_phone_book').show();
				$(this).children('ul').find('input').removeAttr('disabled');
				$(this).find('.icon_call_type').css('right', '0');
				$(this).find('.icon_call_type').children('i').css('cursor', 'default');
				$(this).find('.icon_call_type').children('i').removeClass('editable');
				$(this).find('.icon_call_type').children('i').html('');
				return true;
			}
			else
				return false;
		});
		
		//scroller
		$(".phone_book_list").mCustomScrollbar({
			advanced:{
				autoScrollOnFocus:false, /*auto-scroll on focused elements: boolean*/
				updateOnContentResize: true
			}
		});
		
		//open the delete_entry
		$('.btn_delete').live('click',(function(){
			$(this).addClass('active');
			$(this).parents('.phone_book').children('.delete_form').slideDown();
		}));
		
		//submit and delete the phone entry
		$('.delete_form input:submit').live('click',(function(){
			$(this).parents('.delete_form').siblings('.phone_book_form').find('.btn_delete').removeClass('active');
			$(this).parents('.delete_form').slideUp();
			return true;
		}));
		
		//Close delete_entry
		$('.delete_form input:button').live('click',(function(){
			$(this).parents('.delete_entry').siblings('.phone_book_form').find('.btn_delete').removeClass('active');
			$(this).parents('.delete_entry').slideUp();
		}));
						
		$('.error_message input:button').live('click',(function(){
			$(this).parents('.error_message').slideUp();
		}));
		
		function checkData(tj){
			var name_node = tj.find('input[name=name]');
			var number_node = tj.find('input[name=number]');
			var error_message_node = tj.parent().children('.error_message');

			if (name_node.val().trim()==""){
				error_message_node.slideDown();
				error_message_node.children('.error_message_text').text('Please enter a name');
				name_node.focus();
				return false;
			}
			
			var number = number_node.val().trim();
			
			if (number==""){
				error_message_node.slideDown();
				error_message_node.children('.error_message_text').text('Please enter a number');
				number_node.focus();
				return false;
			}
			
			if (((number / number) != 1) && (number != 0)){
				error_message_node.slideDown();
				error_message_node.children('.error_message_text').text('Please use digits[0 to 9] only in phone number');
				number_node.focus();
				return false;
			}
			
			return true;
		}
		
		$('.add_entry_form').bind("submit", function() {
			if(checkData($(this))){
				return true;
			}
			else
				return false;
		});
		
		$('.phone_search input').bind("keyup", function(){
		  var phone_number = $(this).val();
		  
		  var elements = $('.phone_book_list .phone_book');
		  
		  elements.each(function(){
			var number = $(this).find('.phone_book_form input[name=number]').val();
			
			if(number.search(phone_number) != -1){
				$(this).show()
			}else{
				$(this).hide();
			}
		  });
		  
		});
	});
	
</script>